<template>
  <VPage class="app-container">
    <div class="order" v-if="!showDetail">
      <div class="text-xl font-medium text-center py-2">跟踪号/配货单号</div>
      <div><el-input style="height: 60px;font-size: 20px;" v-model="order_no" placeholder="请输入" @change="changeOrder" />
      </div>
    </div>
    <template v-else>
      <el-row :gutter="12" class="mb-3">
        <el-col :span="16">
          <el-card shadow="never">
            <el-row :gutter="12" class="flex items-end">
              <el-col :span="10">
                <div>SKU</div>
                <div><el-input size="large" v-model="form.sku" placeholder="请输入" @change="changeSKU()" /></div>
              </el-col>
              <el-col :span="8">
                <div>数量</div>
                <div><el-input size="large" v-model="form.pack_num" placeholder="请输入" @change="changeSKU()" /></div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card shadow="never">
            <div class="mb-2">SKU总数量</div>
            <div>
              <div class="text-base text-right"><span class="base-red-color">{{ shipped_quantity
              }}</span>/{{ match_quantity }}</div>
              <el-progress :percentage="percentage" :show-text="false" />
            </div>
          </el-card>
        </el-col>
      </el-row>
      <div class="px-4 py-4 bg-white goods">
        <el-row :gutter="12">
          <!-- <el-col :span="6">
            <div class="text-[#666666]">头程单号：<span>{{ detail.head_goods_order_no }}</span></div>
          </el-col> -->
          <el-col :span="6">
            <div class="text-[#666666]">物流商：<span>{{ detail.order?.logistics_name }}</span></div>
          </el-col>
          <el-col :span="6">
            <div class="text-[#666666]">物流渠道：<span>{{ detail.order?.logistics_channel_name }}</span></div>
          </el-col>
          <el-col :span="6">
            <div class="text-[#666666]">发货备注：<span>{{ detail.order?.ship_remark }}</span></div>
          </el-col>
          <el-col :span="6">
            <div class="text-[#666666]">发货打包备注：<span>{{ detail.order?.packaging_remark }}</span></div>
          </el-col>
          <el-col :span="6">
            <div class="text-[#666666]">物流属性：<span></span></div>
          </el-col>
        </el-row>
        <div class="flex py-4">
          <div class="goods-item">产品名称：<span>{{ detail.sku_cn_title }}</span></div>

          <div class="mr-4" style="width: 286px;height: 240px;">
            <img :src="detail?.image">
          </div>
          <div>
            <el-table :data="tableData" height="400" style="width: 100%;" highlight-current-row :header-cell-style="{
              color: '#333333',
              background: '#F6FAFF'
            }" @selection-change="handleSelectionChange" border>
              <el-table-column prop="sku" label="SKU" width="180" />
              <el-table-column prop="match_quantity" label="单据数量" width="180" />
              <el-table-column prop="shipped_quantity" label="已扫数量" width="180" />
            </el-table>
          </div>
        </div>
      </div>
    </template>
  </VPage>
</template>
<script name="Deliver-goodsShip-info" setup>
import { reactive, toRefs, computed, watch } from 'vue'
import { shipInfo, packed } from './api/index'
import { getBaseSku } from '@/api/public'
import { ElMessage } from 'element-plus'

    const percentage = computed(() => {
  return (shipped_quantity.value / match_quantity.value) * 100
})

const data = reactive({
  order_no: '',
  showDetail: false,
  form: {},
  detail: {},
  tableData: [],
  match_quantity: 0, // 总数量
  shipped_quantity: 0, // 扫描数量
})

const { order_no, showDetail, form, detail, tableData, match_quantity, shipped_quantity } = toRefs(data)

const changeOrder = async (val) => {
  try {
    const res = await shipInfo({
      order_no: order_no.value
    })
    ElMessage.success('领取成功')
    form.value = res.data
    tableData.value = res.data.details
    showDetail.value = true
    computedSKU()
  } catch (e) {
    throw Error(e)
  }
}

const changeSKU = async (val) => {
  try {
    const res = await getBaseSku({
      sku: form.value.sku,
    })
    detail.value = res.data
    if (res.data) {
      const item = form.value.details.find(i => i.sku == res.data.sku)
      const index = form.value.details.findIndex(i => i.sku == res.data.sku)

      if (item) {
        const pack_num = form.value.pack_num || 1
        const data = {
          order_id: form.value.order.order_id,
          sku: res.data.sku,
          num: pack_num
        }
        packed(data).then(res1 => {
          tableData.value.push({
            ...res1.data,
            match_quantity: item.match_quantity,
            shipped_quantity: pack_num
          })
          form.value.details[index].shipped_quantity = form.value.details[index].shipped_quantity + Number(pack_num)
          computedSKU()
        })
      } else {
        ElMessage.error('请扫描当前单号的SKU')
      }
    }
  } catch (e) {
    throw Error(e)
  }
}

const computedSKU = () => {
  if (form.value.details && form.value.details.length > 0) {
    match_quantity.value = form.value.details.reduce((prev, cur) => {
      return prev + cur.match_quantity
    }, 0)
    shipped_quantity.value = form.value.details.reduce((prev, cur) => {
      return prev + cur.shipped_quantity
    }, 0)

  }
}
</script>
<style lang="scss" scoped>
// :deep(.v-page__body) {
//   background: transparent;
// }

.order {
  width: 900px;
  background: #F6FAFF;
  border-radius: 16px;
  padding: 30px 100px;
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
}

.goods {
  height: calc(100% - 140px);
}

.goods-item {
  margin-bottom: 16px;
  color: #666666;
}
</style>